基礎格線觀念 筆記

網頁設計

• 網頁不像平面設計是靜止不動的，會因為『使用者裝置大小』『瀏覽器顯示區域』『操作方式』都會改變內容或排版
• 在網頁設計上的格線尺寸該如何分割？

• 基礎格線系統
  

• 設計軟體的欄數設定
  

• BS5基礎欄位與gutter觀念
  

• BS5的col(column) width是彈性的格線，通常我們不會給它固定寬度，使用者裝置是固定的，手機平板電腦等等，column可以因為裝置不同有所適應變化
• 但是，BS5的gutter寬度空間是固定的，如果你設定gutter是30px接下來整個網頁設定的gutter都固定是30px
  
• 我們在設計網頁內容時，不會讓網頁內容貼齊四周的邊緣畫面上，會留有空隙，空隙通常是gutter on side（gutter width的一半）
• 頁面總寬960px是包含gutter on outside 左10 右10

繪圖軟體與格線之間的關聯性

• 所有內容都會壓在欄線上不會卡在gutter上
• BS5有提供container ，產生固定寬度並包含gutter on outside的容器也就是會為左右邊界保留空間讓畫面不會貼齊邊緣
• 當你縮減gutter的值，多的空間自動會補到column的寬
• 限制類型的container的寬是固定的例如960px，扣除掉gutter以及gutter on outside決定col的寬度空間以適應960px全寬
• 流體類型的container-fluid的col的寬度是不固定的，他會依據你裝置的視窗大小或瀏覽器的大小來決定每個gutter決定col寬度的空間